---
{
	"title": "Correctif « datalist » (saisie automatique) - Dynamique",
	"language": "fr",
	"category": "Correctifs",
	"description": "Montre comment mettre à jour de façon dynamique le contenu de l'élément « datalist », sur la base de l'entrée utilisateur. Particulièrement utile où il ya un grand nombre de suggestions de saisie semi-automatique.",
	"tag": "datalist",
	"parentdir": "datalist",
	"altLangPrefix": "datalist-dynamic",
	"js": ["demo/datalist_dynamic"],
	"dateModified": "2023-04-14"
}
---
<section>
	<h2>But</h2>
	<p>Montre comment mettre à jour de façon dynamique le contenu de l'élément «&#160;<code>datalist</code>&#160;», sur la base de l'entrée utilisateur. Particulièrement utile où il ya un grand nombre de suggestions de saisie semi-automatique.</p>
</section>

<section>
	<h2>Exemple</h2>
	<form action="#" method="get">
		<fieldset>
			<legend>Choisir un bogue ou problème</legend>
			<div class="form-group">
				<label for="plugin">Plugiciel:</label>
				<select class="form-control" id="plugin" name="plugin">
					<option label="Choisir un plugiciel"> </option>
					<option value="Multimedia player">Lecteur multimédia</option>
					<option value="Lightbox" lang="en">Lightbox</option>
				</select>
			</div>
			<div class="form-group">
				<label for="issue">Bogue ou problème:</label>
				<input class="form-control" type="text" id="issue" name="issue" list="issues">
			</div>
			<datalist id="issues" lang="en">
				<!--[if lte IE 9]><select><![endif]-->
				<!--[if lte IE 9]></select><![endif]-->
			</datalist>
		</fieldset>
	</form>

	<details>
		<summary>Visualiser le code</summary>
		<section>
			<h3>HTML</h3>
			<pre><code>&lt;form action=&quot;#&quot; method=&quot;get&quot;&gt;
	&lt;fieldset&gt;
		&lt;legend&gt;Choisir un bogue ou problème&lt;/legend&gt;
		&lt;div class=&quot;form-group&quot;&gt;
			&lt;label for=&quot;plugin&quot;&gt;Plugiciel:&lt;/label&gt;
			&lt;select class=&quot;form-control&quot; id=&quot;plugin&quot; name=&quot;plugin&quot;&gt;
				&lt;option label=&quot;Choisir un plugiciel&quot;&gt; &lt;/option&gt;
				&lt;option value=&quot;Multimedia player&quot;&gt;Lecteur multimédia&lt;/option&gt;
				&lt;option value=&quot;Lightbox&quot; lang=&quot;en&quot;&gt;Lightbox&lt;/option&gt;
			&lt;/select&gt;
		&lt;/div&gt;
		&lt;div class=&quot;form-group&quot;&gt;
			&lt;label for=&quot;issue&quot;&gt;Bogue ou problème:&lt;/label&gt;
			&lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;issue&quot; name=&quot;issue&quot; list=&quot;issues&quot; /&gt;
		&lt;/div&gt;
		&lt;datalist id=&quot;issues&quot; lang=&quot;en&quot;&gt;
			&lt;!--[if lte IE 9]&gt;&lt;select&gt;&lt;![endif]--&gt;
			&lt;!--[if lte IE 9]&gt;&lt;/select&gt;&lt;![endif]--&gt;
		&lt;/datalist&gt;
	&lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
		</section>

		<section>
			<h3>JavaScript</h3>
			<pre><code>{{#escape}}{{#stripbanner}}{{> datalist_dynamic }}{{/stripbanner}}{{/escape}}</code></pre>
		</section>
	</details>
</section>
